<template>
	<view class="container" :style="(ispdFocus || isuserFocus)?containerHeight.focus:containerHeight.blur">
		<u-toast ref="uToast"></u-toast>
		<view class="input-area">
			<view class="user-icon" @click="getCode()">
				<image :src="userImg" style="opacity:1;border-radius: 50%;">
				</image>
			</view>
			<!-- 一键登录弹窗 -->
			<view>
				<div style="border-radius: 10px; overflow: hidden;">
					<p
						style="font-size: 18px; font-weight: bold; color: #333; margin-bottom: 10px; text-align: center;">
						扫码关注公众号<br>回复<span style="color: red;">{{ this.wechatLoginCode }}</span> 完成登录

					</p>
					<!-- <u-icon name="reload" @click="getWecahtLoginCode()" style="margin-left: 145px; margin-top: -17px;"></u-icon> -->

					<uni-card
						style="display: flex; align-items: center; padding: 15px; border: 1px solid #ddd; border-radius: 10px;">

						<!-- <span style="color: red; margin-right: 5px;">{{ this.wechatLoginCode }}</span> -->

						<view class="qrcode">
							<img src="../../static/images/gzh.png" alt="文化视窗" srcset="">
						</view>

						<b style="color: red;">点击头像一键登录</b>
					</uni-card>


					<!-- <u-button style="width: 30%;" type="primary" shape="circle" text="返回登录" @click="backLogin()" ></u-button> -->
				</div>


			</view>

		</view>
		<view class="copy-right">CopyRight 中国文化视窗网</view>
	</view>
</template>

<script>
	import api from '@/util/api.js';
	import vote from '@/util/vote.js';

	export default {
		data() {
			return {
				// 微信返回的code
				code: '',
				// containerHeight: 1000,
				containerHeight: {
					focus: 'height:800rpx;transition:0.2s',
					blur: 'height:1300rpx;transition:0.2s'
				},

				// 登录界面的用户图标
				// userImg: '../../static/images/avatar.png',
				userImg: '../../static/logo.png',
				// 微信登录验证码:
				wechatLoginCode: '验证码',
				// 轮询的对象
				timer: null,
				// 公众号相关
				wx: {
					appId: 'wxb079ec102fdec136',
					APPsecret: 'd500f05eec9fed0cb8f23819595e3bf0',
				}
			}
		},
		onLoad() {
			let that = this;
			that.create();
			// that.goLogin();
		},
		methods: {
			create() {
				let base_user_id = uni.getStorageSync("base_user_id");
				let data = this.getUrlCode();
				let authCode = data.code;
				if (typeof authCode !== 'undefined' && authCode !== null) {
					this.code = authCode;
					// 有code 后端交互==>登陆成功
					this.goLogin();
					return;
				}
				// 没有code说明没登录 调取登录接口
				console.log("没code 调登陆");
				this.getCode();


			},
			getCode() {
				/*
				    这里必须是公众号绑定好的域名，在传递的过程中必须要进行编码
				*/
				var codecallback = "http://vote.cctvwenhua.tv/";
				let encodedUrl = encodeURIComponent(codecallback);
				var auth_url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + this.wx.appId +
					"&redirect_uri=" + encodedUrl +
					"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
				window.location.href = auth_url;
			},
			getUrlCode() {
				// 截取url中的code方法
				var url = location.search;
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
					}
				}
				return theRequest;
			},
			//登录方法，当成功取到code时候，执行此段代码，将code传入后台接口，来获取个人信息，以实现登录
			goLogin() {
				// 调这里说明已经有code 直接请求后端
				api.get("/wx/login", {
					code: this.code
				}).then(res => {
					if (res.code != 200) return vote.message("请重新点击头像!", 'error')
					// 没有出错 保存去首页
					uni.setStorageSync('token', res.data.token);
					// 登陆成功 将数据保存
					uni.setStorageSync("userInfo", res.data);

					// 给出提示语
					vote.message("登陆成功!", 'success');

					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 500)


				})
			}
		},


		// 跳转页面
		roRegister() {
			this.$u.route('/pages/login/register');
		},


		watch: {

		},

	}
</script>

<style lang="scss">
	$screen-height: 1334rpx;

	.container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-end;
		width: 100%;


		.input-area {
			width: 80%;

			.user-icon {
				width: 100%;
				display: flex;
				justify-content: center;

				>image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.input-text {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				margin-top: 20rpx;

				.clear {
					height: 100rpx;
					display: flex;
					align-items: center;

					.img {
						height: 36rpx;
						width: 36rpx;
					}
				}
			}

			.btn {
				margin-top: 40rpx;

				.login-btn {
					width: 100%;
					border-radius: 20rpx;
					border: $uni-color-primary;
					background-color: $uni-color-primary;
					color: $uni-text-color-inverse;
				}
			}
		}

		.copy-right {
			// bottom: 100rpx;
			bottom: 0;
			width: 100%;
			color: $uni-text-color-grey;
			text-align: center;
			font-size: 24rpx;
		}
	}

	// 弹出框的样式
	.fast_login {
		border-radius: 50px;
	}
</style>